<template>
  <view>
      <!-- 搜索框 -->
      <UgoSearch></UgoSearch>
      <!-- tabs -->
      <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#eb4450" bar-width="160"></u-tabs>
      <!-- tabs内容 条件渲染 -->
      <view class="tab-content">
          <view class="tabs-item" v-for="(item,index) in list" :key="item.name" >
              <block v-if="current===index">
                  <navigator class="goods-item" v-for="item1 in goodsList" :key="item1.goods_id" :url="'/pages/goods_detail/goods_detail?goods_id='+item1.goods_id">
                      <view class="left">
                          <u-image width="191rpx" height="191rpx" :src="item1.goods_small_logo"></u-image>
                      </view>
                      <view class="right">
                          <view class="goods-name">{{item1.goods_name}}</view>
                          <view class="goods-price">￥{{item1.goods_price}}</view>
                      </view>
                  </navigator>
              </block>
          </view>
      </view>
  </view>
</template>

<script>
export default {
		data() {
			return {
				list: [{
					name: '综合'
				}, {
					name: '销量'
				}, {
					name: '价格'
				}],
				current: 0,
                goodsList:[],//商品列表
			}
		},
        onLoad({cid}){
            this.params={
            // 否	string	关键字
            query: "",
            // 否	string	分类id
            cid: cid || 6,
            // 否	number	页码
            pagenum: 1,
            // 否	number	页容量
            pagesize: 10,
            },
            // 获取商品列表
            this.getGoodsList()
            // 定义商品总数
            this.total=0
        },
        // 下拉刷新
        async onPullDownRefresh(){
            // 重置数据
            this.goodsList=[];
            // 重置页码
            this.params.pagenum=1;
            // 重新渲染数据
            await this.getGoodsList()
            // 关闭下拉刷新
            uni.stopPullDownRefresh()
        },
        // 滚动条触底事件   上拉加载下一页事件
        onReachBottom(){
            if(this.goodsList.length>=this.total){
                // 没有数据了
                uni.showToast({
                    title: '没有更多数据了~',
                    icon: 'none',
                });
                  
            }else{
                // 还有数据
                // 加载下一页
                this.params.pagenum++;
                // 重新渲染数据
                this.getGoodsList()
            }
        },
		methods: {
			change(index) {
				this.current = index;
			},
            // 获取商品列表数据
            async getGoodsList(){
                const res=await this.$u.http.get("/goods/search",this.params)
                console.log(res);
                // 数组合并
                this.goodsList=[...this.goodsList,...res.goods]
                // 总条数赋值
                this.total=res.total
            }
		}
	}
</script>

<style lang="scss" scoped>
.goods-item {
  display: flex;
  margin: 10rpx 20rpx 10rpx 0rpx;
  padding: 10rpx 0;
  border-bottom: 1rpx solid #eee;
  .left {
    flex: 1;
    display: flex;
    justify-content: center;
    u-image {
    }
  }
  .right {
    flex: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    .goods-name {
      color: #666;
    }

    .goods-price {
      color: $themeColor;
    }
  }
}
</style>